<template>
    <div class="start">
        <div v-for="item of startlist" :key="item.id" >
            <img v-if="item ==1" src="../assets/star.png" alt="">
            <img v-else src="../assets/none-star.png" alt="">     
        </div>   
        <p class="average">{{start}}</p>
    </div>
</template>
<script>
export default {
  name: "Start",
  data() {
    return {
      isshow: 1,
      startlist: []
    };
  },
  props: {
    start: {
      type: Number
    }
  },
  created() {
    var start = this.start / 2;
    for (let i = 1; i < 6; i++) {
      if (i < start) {
        this.startlist.push(1);
      } else {
        this.startlist.push(0);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.start {
  display: flex;
  padding-left: 10px;
  img {
    width: 3.5vw;
    height: 3.5vw;
  }
  .average {
    margin-left: 20px;
  }
}
</style>
